<template>
  <cs/>
  <div class="Navbar">
    <Navbar/>
  </div>

  <el-container style="" class="main">
    <el-container style="  margin-top: 80px;">
      <el-header>
        <img
            src="../static/image/userimg.jpg"
            alt="背景图"
            style="width: 100%; height: 450px; object-fit: cover;"
        />

      </el-header>
      <div class="usertitle">
        <el-avatar
            :size="100"
            :src="avatarUrl"
            style=" top: -50px; left: 20px;margin: 0 auto"
        />
        <h4>{{ userInfo.bio || '没有描述' }}</h4>
      </div>


      <el-main style="background-color: rgba(245,245,245,0);" class="main-content ">

        <!-- 侧边栏 -->
        <el-aside class="main-content-left">
          <el-menu default-active="1">
            <el-menu-item index="1">
              <i class="el-icon-user"></i> 概览
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-edit"></i> 发布的
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i> 订单
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-star-on"></i> 收藏
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i> 设置
            </el-menu-item>
          </el-menu>
        </el-aside>
        <div class="main-content-right boli">
          <el-card class="boli">

              <h1>昵称：<span>{{ userInfo.username }}</span></h1>
              <p>用户等级：<span>{{ userInfo.level }}</span></p>
              <p>邮箱：<span>{{ userInfo.user_email }}</span></p>
              <p>描述：本站第<span>{{ userInfo.id }}</span>号会员 </P>
              <P>入驻时间：<span>{{ userInfo.created_at }}</span></p>
          </el-card>
          <el-card class="boli">
            <h3>财富</h3>
              <p>余额：<span>￥{{ userInfo.balance }}</span></p>
              <p>
                积分：<span>{{ userInfo.integral }}</span>
                <el-button type="text" @click="integrals">签到</el-button>
              </p>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
  <div class="but">
    <footers/>
  </div>
</template>

<script>
import {useUserStore} from "@/stores/user.js";

export default {
  name: 'UserProfile',
  data() {
    return {
      userStore: useUserStore(),
      // avatarUrl: 'https://imgt.top/images/2024/07/02/1-1P121034P0-501e8535da6cb50b20.jpg',
      // username: 'blank',
      // certification: '未认证',
      // memberId: 2961,
      // days: 5,
      // gender: '女',
      // website: '',
      // bio: '',
      // balance: 0,
      // credit: 18,
      // jianjie: '这个人很懒，什么都没写。',
    };
  },
  computed: {
        userInfo() {
          if (this.userStore.userInfo==null) {
              this.userStore.loadUserInfoFromLocalStorage(); // 加载本地存储中的用户信息
          }
      return this.userStore.userInfo;// 从用户存储获取用户信息
    },
  }
};
</script>

<style scoped>
@media (min-width: 1250px) {
  .main {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .usertitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 180px;
    flex-direction: column;
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 5px;
    padding: 12px;
    width: 95%;
    margin-left: 21px;
    margin-bottom: -20px;
  }

  .main-content-left {
    width: 20%;
  }

  .boli {
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 5px;
    width: 50%;
  }

  .main-content {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .main-content li {
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.33);
    border-radius: 3px;
  }

  .main-content-right {
    width: 80%;
    display: flex;
    justify-content: space-between;

  }

  .el-menu {
    background-color: rgba(245, 245, 245, 0.19);
    border-radius: 10px;
  }

  .el-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .main {
    width: 100%;
    flex-direction: column; /* 列布局 */
    align-items: flex-start; /* 左对齐 */
  }

  .usertitle {
    margin-top: 120px; /* 顶部间距 */
    width: 100%; /* 宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 5px;
  }

  .main-content li {
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.33);
    border-radius: 3px;
  }

  .boli {
    width: 100%;
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 5px;
  }

  .el-header img {
    width: 100%; /* 确保背景图撑满 */
    height: auto; /* 高度自适应 */
  }

  .main-content {
    flex-direction: column; /* 列方向 */
    width: 100%;
  }

  .main-content-left {
    width: 100%; /* 侧边栏占满宽度 */
    margin-bottom: 20px; /* 侧边栏与内容间距 */
  }

  .main-content-right {
    width: 100%; /* 内容区占满宽度 */
    display: flex;
    flex-direction: column; /* 列方向 */
    align-items: flex-start; /* 左对齐 */

  }

  .el-card {
    width: 100%; /* 卡片占满宽度 */
    margin-bottom: 20px; /* 卡片间距 */
  }

  .el-menu {
    width: 100%; /* 侧边栏占满宽度 */
  }

  .el-header {
    padding: 0;
  }

  .el-main {
    padding: 0;
  }

  body {
    padding: 0;
    margin: 0;
  }
  .but{
    margin-top: 30px;
  }
}

</style>
